﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>Personal information</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css"> 
		@font-face{
			font-family:CrazyIt;
			src: url("../static/images/Blazed.ttf") format("TrueType");
		}
	</style>
</head>
<body style="background-color:whitesmoke;background: url('../static/images/21.jpg') repeat;">

	<div class="container" style="background-color: whitesmoke;width: 1000px;">
		<nav class="navbar navbar-default " role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" style="font-family:CrazyIt;font-size:28pt;text-decoration: none;">
						TALK
					</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li style="margin-left: 50px;"><a href="../recommend/recommend.html">首页</a></li>

						<li style="display:flex;">
							<input type="text" class="form-control" placeholder="twitterhandle" style="width:200px;margin-top: 8px;margin-left: 20px;" />
							<a href="#" class="btn btn-info btn-lg" style="margin-top:8px;width: 50px;height: 33px;line-height: 10px;">
								<span class="glyphicon glyphicon-search" style="line-height: 5px;"></span> 
							</a>
						</li>
						<li style="margin-left: 200px;">
							<a href="#">
							<span class="badge pull-right">3</span>
							<span class="glyphicon glyphicon-bell"></span>
							</a>
						</li>
						<li>
							<a href="#"><img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="30" height="30" style="margin-top: -5px;" ></a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div style="height: 600px;">
			<div style="height: 180px;position: relative;">
				<img src="https://pic2.zhimg.com/v2-6e8fccc8a30e8cf15a90e7a894011579_r.jpg"  style="width: 968px;height: 180px;" id="newImage" >
				
			</div>
			<div style="height: 350px;display: flex;background-color: white; justify-content: space-between;">	
				<div class="col-md-12 column" style="position:relative">
					<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="170" style="position: absolute;margin-left:10px;margin-top: -50px;">
					<div class="col-md-12 column" style="margin-left: 250px;">
						<h2>
							Heading
						</h2>
						<p>
							学号：<span id="stuId">20181200</span>
						</p>
						<p>
							性别：<span id="sex">男</span>
						</p>
						<p>
							年龄：<span id="age">13</span>
						</p>
						<p>
							学院：<span id="depart">数信学院</span>
						</p>
						<p>
							个人介绍：<span id="introduction">我热爱生活</span>
						</p>
						<p>
							手机号：<span id="phone">666666</span>
						</p>
						<p>
							<a class="btn" href="#" style="margin-left:-15px;display: flexbox;">想了解更多，来我的博客吧！GO</a>
							
						</p>
					</div>
				</div>
				<button class="btn btn-info btn-lg" style="height: 45px;margin-top:60px;">
					<span class="glyphicon glyphicon-plus"> 关注</span>
				</button>
				<a href="#" class="btn btn-info btn-lg" style="height: 45px;margin-top:60px;margin-left: 15px;">
					<span class="glyphicon glyphicon-comment"> 私信他</span>
				  </a>
			</div>
		</div>
		
	</div>
</body>
</html>